@import (once) "vars";
@import (once) "utility";

//普通按钮
@base-button-width:100px;
@base-button-height:30px;
@base-button-font-color:@base-font-color;
@base-button-font-size:@base-font-size;
@base-button-bg-color:#fff;
@base-button-border-width:1px;
@base-button-border-color:@base-border-color;
@base-button-padding-y: 0;
@base-button-padding-x: 0;

//次级按钮
@secondary-button-font-color: @secondary-font-color;
@secondary-button-font-size: @base-button-font-size;
@secondary-button-border-color: @secondary-border-color;


@primary-button-bg-color:#f98674;
@primary-button--hover-bg-color:#D24F3B;
@primary-button-font-color:#fff;
@primary-button-font-size:18px;


@button-icon-padding-x:15px;
@button-icon-text-space:10px;

.button-hook(){}

.button-secondary-hook(){}

.button-primary-hook(){}

.button {
  #utility .display-inline-block;
  #utility .border-box;
  #utility .rem(min-width, @base-button-width);
  #utility .height(@base-button-height);
  #utility .rem-padding(@base-button-padding-y @base-button-padding-x);
  #utility .rem-border(@base-button-border-width solid @base-button-border-color);
  background-color: @base-button-bg-color;
  color: @base-button-font-color;
  #utility .rem(@base-button-font-size);
  text-align: center;
  cursor: pointer;

  .button-hook;

  //&.button-primary{
  //  border: none;
  //  font-weight: bold;
  //  background: @primary-button-bg-color;
  //  color: @primary-button-font-color;
  //  .rem-font-size(@primary-button-font-size);
  //
  //  &:hover{
  //    background-color: @primary-button--hover-bg-color;
  //  }
  //  .primary-button-hook;
  //}
  //
  //&.button-secondary{
  //  .height(@secondary-button-height);
  //  border-color: @strong-color;
  //  color: @strong-color;
  //  background-color: lighten(@strong-color,20%);
  //}
}

.button-secondary:extend(.button all){
  #utility .rem(@secondary-button-font-size);
  color: @secondary-button-font-color;
  border-color:@secondary-button-border-color;

  .button-secondary-hook;
}

//.button-icon{
//  .inline-block-context;
//  .rem-padding(0 @button-icon-padding-x);
//
//  .text,.icon {
//    .inline-block-element();
//  }
//
//  .icon + .text,
//  .text + .icon {
//    .rem-margin-left(@button-icon-text-space);
//  }
//}